<template>
  <div class="function-manager">
    <!-- 左侧：元件库 -->
    <div class="sidebar">
      <h3>元件库</h3>
      <draggable :list="availableComponents" group="components" class="component-list">
        <div v-for="component in availableComponents" :key="component.name" class="component-item">
          {{ component.label }}
        </div>
      </draggable>
    </div>

    <!-- 中间：工作区 -->
    <div class="workspace" ref="workspace">
      <h3>工作区</h3>
      <draggable v-model="workspaceComponents" group="components" class="workspace-area">
        <component
            v-for="(component, index) in workspaceComponents"
            :is="component.name"
            :key="index"
            :style="[component.style]"
            class="workspace-component"
            @mousedown.native="selectComponent(index)"
        />
      </draggable>
    </div>

    <!-- 右侧：属性编辑器 -->
    <div class="properties-panel">
      <h3>属性编辑</h3>
      <div v-if="selectedComponent !== null">
        <el-form label-width="80px">
          <el-form-item label="宽度">
            <el-input v-model="selectedComponent.style.width" placeholder="输入宽度"></el-input>
          </el-form-item>
          <el-form-item label="高度">
            <el-input v-model="selectedComponent.style.height" placeholder="输入高度"></el-input>
          </el-form-item>
          <el-form-item label="标签">
            <el-input v-model="selectedComponent.label" placeholder="输入标签"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-else>
        <p>请选择一个组件进行编辑</p>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import { Button, Input } from 'element-ui';

export default {
  components: {
    draggable,
    "el-button": Button,
    "el-input": Input
  },
  data() {
    return {
      // 元件库中的组件
      availableComponents: [
        { name: "el-button", label: "按钮", style: { width: "100px", height: "40px", position: "absolute", top: "0px", left: "0px" } },
        { name: "el-input", label: "输入框", style: { width: "200px", height: "40px", position: "absolute", top: "0px", left: "0px" } }
      ],
      // 工作区中的组件
      workspaceComponents: [],
      // 当前选中的组件索引
      selectedComponentIndex: null,
    };
  },
  computed: {
    // 当前选中的组件
    selectedComponent() {
      return this.workspaceComponents[this.selectedComponentIndex] || null;
    }
  },
  methods: {
    // 选择组件进行编辑
    selectComponent(index) {
      this.selectedComponentIndex = index;
    },
    // 处理拖动结束的事件
    onDrop(event) {
      const index = event.dataTransfer.getData('index');
      if (index !== undefined && this.workspaceComponents[index]) {
        const workspaceRect = this.$refs.workspace.getBoundingClientRect();
        const offsetX = event.clientX - workspaceRect.left;
        const offsetY = event.clientY - workspaceRect.top;
        // 确保组件的索引有效，避免访问undefined
        this.$set(this.workspaceComponents[index].style, 'left', `${offsetX}px`);
        this.$set(this.workspaceComponents[index].style, 'top', `${offsetY}px`);
      }
    }
  },
  mounted() {
    const workspace = this.$refs.workspace;
    workspace.addEventListener('dragover', (event) => event.preventDefault());
    workspace.addEventListener('drop', this.onDrop);
  }
};
</script>

<style scoped>
.function-manager {
  display: flex;
  height: 100%;
  background-color: #f5f5f5;
}

.sidebar {
  width: 20%;
  background-color: #ffffff;
  padding: 20px;
  border-right: 1px solid #e0e0e0;
}

.workspace {
  width: 50%;
  background-color: #f8f8f8;
  padding: 20px;
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  position: relative;
}

.properties-panel {
  width: 30%;
  background-color: #ffffff;
  padding: 20px;
  border-left: 1px solid #e0e0e0;
}

h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.component-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.component-item {
  padding: 12px 16px;
  background-color: #e0e7ff;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  font-size: 16px;
  transition: background-color 0.2s ease;
}

.component-item:hover {
  background-color: #c7d2fe;
}

.workspace-area {
  min-height: 400px;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  position: relative;
}

.workspace-component {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: move;
  position: absolute;
  transition: transform 0.2s ease;
}
</style>
